<!-- 表格轮播组件  -->
<template>
  <!-- <div class="w-[500px] max-h-[500px] bg-green-700 overflow-hidden"> -->
  <div class="flex  items-center z-50 xwxs:(h-[200px] text-[50px] ) xwsm:(h-[60px] text-[30px] )"
    style="background-color:#009757 ;">
    <div class="w-[50%] text-white pl-[15px]">检测类型</div>
    <div class="w-[25%] text-white">数值</div>
    <div class="w-[25%] text-white">状态</div>
  </div>
  <div class="overflow-hidden">

    <vue3-seamless-scroll style="
          max-height: 100%;
          overflow: hidden;
          width: 100%;  
          color: white;
          font-size: 18px;
          text-align: center;
        " hover-stop="true" v-model="isScroll" :list="realTimeData.length > 6 ? realTimeData : []" :hover="true"
      :step="0.3" :limitMoveNum="60">

      <ul style="height: auto;">

        <li v-for="(item, index) in realTimeData" :key="index" style="padding: 5px 0; " class="list">

          <n-tooltip placement="top-start" trigger="hover">
            <template #trigger>
              <div class="flex items-center list">

                <span class=" w-[50%] pl-[15px]">
                  {{ item.type }}
                </span>
                <span class="w-[25%]">{{ item.number
                }}</span>
                <span class="w-[25%]">{{ item.status }}</span>
              </div>
            </template>
            <div class="text-white">
              {{ item.bz ?? '暂无检测项标准' }}
            </div>
          </n-tooltip>
        </li>




      </ul>
    </vue3-seamless-scroll>
  </div>

  <!-- </div> -->
</template>

<script setup>
import { realTimeData } from '../pages/dataManagement/common'
const isScroll = ref(true)

</script>
<style lang="scss">
//@import url(); 引入公共css类
html {

  font-size: 192px;
}

body {
  // background-color: #114cfb;
}

.production-swiper-table {
  position: relative;
  margin: 0 auto;
  width: 100%;
  font-size: 0.06rem;
  color: white;

  .table-wrapper {
    position: absolute;
    top: 0.2rem;
    width: 100%;

    .table-header {
      display: flex;
      align-items: center;
      margin: 0 auto;
      height: 0.21rem;
      width: 98%;
      background: #05076b;
      opacity: 1;
      border: 0.01rem solid #3655da;

      .table-header-item {
        text-align: center;
        font-size: 0.07rem;
        font-weight: bold;
      }
    }

    .table-content {
      width: 98%;
      margin: 0 auto;

      .wrap {
        height: 1.6rem;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;

          li {
            display: flex;
            align-items: center;

            .li-item-content {
              display: inline-block;
              height: 0.21rem;
              line-height: 0.21rem;
              text-align: center;
            }

            .title {
              color: #55cbfd;
            }
          }

          li:nth-child(odd) {
            background: #030f61;
          }
        }
      }
    }
  }
}

.g-progress {
  display: inline-block;
  width: 0.6rem;
  height: 0.05rem;
  background: linear-gradient(90deg, #0335ff, #01b4ff, #1d2772 var(--progress));
  border-radius: 0.02rem;
}



// 隔行变色
.list:nth-child(even) {
  background-color: #a0e1ac;
}


.member-item:nth-of-type(even) {
  background: #fmcf7f2;
}
</style>